<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" @closed="resetForm('form')">
			<el-form ref="form" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="上级导航" prop="pid" v-if="parentFlag" v-show="!isHome">
					<el-select v-model="form.pid" placeholder="请选择上级导航">
						<el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="导航名称" prop="name"><el-input v-model.trim="form.name"></el-input></el-form-item>
				<el-form-item label="导航类型" v-show="!isHome">
					<el-radio-group v-model="form.isOutsite">
						<el-radio label="2">普通导航</el-radio>
						<el-radio label="1">链接导航</el-radio>
						<el-radio label="3">路由导航</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="链接地址" prop="value" v-if="form.isOutsite == 1" v-show="!isHome">
					<el-input v-model.trim="form.value"></el-input>
				</el-form-item>
				<el-form-item label="路由地址" v-if="form.isOutsite == 3" v-show="!isHome" prop="routeProp">
					<el-input v-model.trim="form.routeProp"></el-input>
				</el-form-item>
				<el-form-item label="导航模板" prop="extFiled1" v-if="form.isOutsite == 2" v-show="!isHome">
					<el-input placeholder="请选择模板" v-model="curTemplate.name" class="input-with-select" @focus="handleTemplate">
						<el-button slot="append" icon="el-icon-search" @click="handleTemplate"></el-button>
					</el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否显示" v-show="!isHome">
							<el-radio-group v-model="form.isShow">
								<el-radio label="1">显示</el-radio>
								<el-radio label="2">隐藏</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序" prop="orderBy">
							<el-input-number v-model="form.orderBy" :min="1" :max="1000" size="medium" label="排序"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">注：</el-divider>
				<p style="text-indent: 0">
					<span class="el-icon-info"> 批量添加导航时导航名称请以“,”隔开，例如：名称,名称,名称</span>
					<span class="el-icon-info"> 链接导航的链接地址必须以http://或https://开头</span>
				</p>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</el-dialog>
		<SelectTemplate :defaultValue="curTemplate" @emit="setTemplate" />
	</div>
</template>
<script>
export default {
	components: {
		SelectTemplate: () => import('../../webTemplate/SelectTemplate.vue')
	},
	data() {
		return {
			title: '新增',
			dialogVisible: false,
			form: {
				pid: '0',
				icon: '', //导航图标
				name: '', //导航名称
				classType: '1', //层级类型
				status: '1', //状态，1-正常，2-禁用
				isShow: '1', //状态，1-显示，2-隐藏
				isOutsite: '2', //是否外链；1-是，2-否  //导航类型
				value: '', //链接地址
				orderBy: 10,
				des: '',
				extFiled1: '',
				routeProp: ''
			},
			rules: {
				pid: [{ required: true, message: '请选择上级导航', trigger: 'blur' }],
				name: [{ required: true, message: '请输入导航名称', trigger: 'blur' }],
				routeProp: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
				value: [
					{
						required: true,
						message: '请输入链接导航地址，链接地址以http://或https://开头',
						trigger: 'change'
					}
				],
				extFiled1: [{ required: true, message: '请选择导航模板', trigger: 'change' }]
			},
			curColumn: {},
			curTemplate: {},
			tableData: [],
			parentFlag: false
		};
	},
	computed: {
		isHome() {
			return this.curColumn.id == 1;
		}
	},
	mounted() {
		this.$bus.$on('webColumnAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('webColumnAdd');
	},
	methods: {
		//显示弹窗
		init(row, type) {
			this.parentFlag = false;
			this.curColumn = row || {};
			this.setParentData(row);
			this.curTemplate = {};
			if (!type) {
				//新增根导航
				this.form = this.$options.data().form;
				this.$delete(this.form, 'id');
			} else if (type == 'add') {
				//新增子导航
				this.form = this.$options.data().form;
				this.form.pid = row.id;
				this.$delete(this.form, 'id');
			} else {
				var list={
					pid:row.pid,
					isOutsite:row.isOutsite,
					name:row.name,
					value:row.value,
					routeProp:row.value,
					isOutsite:row.isOutsite,
					isShow:row.isShow,
					orderBy:row.orderBy,
					extFiled1:row.extFiled1
				}
				//编辑导航
				this.form = { ...this.form, ...list };
				this.$set(this.form, 'id', row.id);
				this.curTemplate = row.extFiled1 ? JSON.parse(row.extFiled1) : {};
				this.parentFlag = row.classLevel <= 2;
				this.form.routeProp = row.value;
			}
			this.title = type == 'edit' ? '编辑' : '新增';
			this.dialogVisible = true;
		},
		setParentData(row) {
			this.tableData = [];
			this.tableData = JSON.parse(JSON.stringify(this.$store.state.sysClassify.tableData));
			this.tableData.unshift({ name: '根目录', id: '0' });
			if (!row) return;
			this.tableData = this.tableData.filter(v => v.id != row.id);
		},
		handleTemplate() {
			this.$bus.$emit('selectWebTemplate', this.curTemplate);
		},
		setTemplate(v) {
			this.curTemplate = v;
			this.form.extFiled1 = JSON.stringify(v);
		},
		submitForm(form) {
			if (this.form.isOutsite == 3) {
				this.form.value = this.form.routeProp;
			}
			this.$refs[form].validate(async valid => {
				if (valid) {
					if (this.form.isOutsite == 1 && this.form.value.indexOf('http') != 0) {
						this.warnMsg('链接导航的链接地址必须以http://或https://开头');
						return;
					}
					let dispatchType = this.title == '新增' ? 'addWebColumn' : 'updateWebColumn';
					await this.$store.dispatch(dispatchType, this.form);
					this.done();
				}
			});
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('getWebColumnList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		}
	}
};
</script>
